<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">


<script src="js/tools.js"></script>
<script>
    /*
    1. 什么是函数防抖[debounce] ？

    函数防抖是优化高频率执行js代码的一种手段，
    可以让被调用的函数在一次连续的高频操作过程中指被调用一次。

    2.函数防抖的作用
    减少代码执行的次数，提高程序的性能

    3.函数防抖应用场景
    oninput / onmousemove / onscroll / onresize等事件
    */

    // let oInput = document.querySelector("input");
    // let timeId = null;
    // oInput.oninput = function() {
    //     timeId && clearTimeout(timeId);
    //     timeId =  setTimeout(function() {
    //         console.log("发送网络请求");
    //     }, 1000);
    // }

    function loadData(event) {
        console.log("发送网络请求");
        console.log(this);
        console.log(event);
    }
    let oInput = document.querySelector("input");
    oInput.oninput = debounce(loadData);

</script>

</body>
</html>